<template>
	<view class="device-booking">
		<u-sticky>
			<view class="device-search">
				<u-search :show-action="true" actionText="查找" :animation="false"></u-search>
			</view>
		</u-sticky>
		<view class="device-list">
			<device-cell v-for="item in deviceList" :key="item.id" :title="item.name" :image="item.pic" btnText="预约"
				btnType="warning" @click="gotoDetail">
				<view class="device-info">
					<view>
						条码：{{item.code}}
					</view>
					<view>
						型号：{{item.model}}
					</view>
					<view>
						机房：{{item.room}}
					</view>
				</view>
			</device-cell>
		</view>
	</view>
</template>

<script>
	import DeviceCell from '@/components/DeviceCell/DeviceCell.vue'
	export default {
		components: {
			DeviceCell
		},
		data() {
			return {
				deviceList: [{
					id: 1,
					name: '强子对撞机',
					code: '3ISO3OO',
					model: '物理对撞设备',
					room: '测试机房',
					pic: 'https://cdn.uviewui.com/uview/album/1.jpg'
				},{
					id: 2,
					name: '强子对撞机',
					code: '3ISO3OO',
					model: '物理对撞设备',
					room: '测试机房',
					pic: 'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				{
					id: 3,
					name: '强子对撞机',
					code: '3ISO3OO',
					model: '物理对撞设备',
					room: '测试机房',
					pic: 'https://cdn.uviewui.com/uview/album/1.jpg'
				}]
			}
		},
		methods: {
			gotoDetail() {
				uni.navigateTo({
					url: '/subpkg/device-detail/device-detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.device-booking {
		min-height: 100vh;
		background-color: #F6F6F6;

		.device-search {
			display: flex;
			align-items: center;
			height: 84rpx;
			padding: 0 34rpx;
			background-color: #fff;

			// 搜索组件样式
			.u-search__action--active {
				height: 26px;
				width: 65px;
				background-color: #0A7AFF;
				border-radius: 8rpx;
				line-height: 52rpx;
				color: #fff;
				font-size: 14px;
			}

			.u-search__content {
				height: 52rpx !important;
			}
		}

		.device-list {
			height: 100%;
			padding: 20rpx 18rpx 0;
		}

	}

	// device-cell组件插槽样式
	.device-info {
		font-size: 12px;
		color: #666666;

		view {
			margin-top: 8rpx;
		}
	}

	.u-button {
		height: 26px !important;
		width: 65px !important;

		.u-button__text {
			font-size: 18px !important;
		}

	}
</style>
